import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtButton, AtModal } from 'taro-ui'
import './index.scss'

const virtualArr = [
  {
    id: 1,
    url: require('@/assets/images/components/room.jpg'),
    name: '26楼展示厅',
    date: '周一到周五',
    status: 0 // 0取消 1 通过 2不通过
  },
  {
    id: 2,
    url: require('@/assets/images/components/room.jpg'),
    name: '1楼大厅',
    date: '周一',
    status: 1 // 0取消 1 通过 2不通过
  },
  {
    id: 3,
    url: require('@/assets/images/components/room.jpg'),
    name: '1楼大厅',
    date: '周一',
    status: 2 // 0取消 1 通过 2不通过
  }
]

const MyAppointment = () => {
  const [roomData, setRoomData] = useState([])
  const [isOpened, setIsOpened] = useState(false)
  const [info, setInfo] = useState(null)

  // 点击取消预约
  const cancelAppointment = () => {
    if (info) {
      const { status } = info
      console.log(`${status === 0 ? '我要预约' : '我已预约'}`)
    }
  }

  // 点击预约详情
  const jumpDetails = ({ status, id }) => {
    console.log('id', id, status)
    if (status === 1) {
      Taro.navigateTo({
        url: `/pages/appointment-details/index?id=${id}`
      })
    }
  }

  // 打开弹出框
  const openModal = obj => {
    setIsOpened(true)
    setInfo(obj)
  }

  // 关闭弹出框
  const closeModel = () => {
    setIsOpened(false)
    setInfo(null)
  }

  const renderStatus = status => {
    // 0取消 1 通过 2不通过
    if (status === 0) return '已取消'
    if (status === 1) return '已通过'
    if (status === 2) return '不通过'
    return '未知'
  }

  // 请求数据
  const initData = () => {
    setRoomData(virtualArr)
  }

  useEffect(() => {
    initData()
    return () => {}
  }, [])

  return (
    <View className='my-appointment-part'>
      <View className='my-appointment-list'>
        {
          roomData.length > 0 ? roomData.map(item => (
            <View key={item.id} className='my-appointment-item'>
              <View className='my-appointment-title'>
                <View className='room-name'>26号大厅</View>
                {
                  item.status === 1 ? (
                    <AtButton
                      size='small'
                      className='cancel-appointment-btn'
                      onClick={() => openModal(item)}
                    >
                      取消预约
                    </AtButton>
                  ) : null
                }
              </View>
              <View className='my-appointment-info'>
                <View className='appointment-date'>预约时间：{item.name}</View>
                <View className='appointment-status'>状态：{renderStatus(item.status)}</View>
              </View>
              <View
                className='appointment-details'
                onClick={() => jumpDetails(item)}
              >
                预约详情
              </View>
            </View>
          )) : <View>no data</View>
        }

        {/* 弹出框 */}
        <AtModal
          isOpened={isOpened}
          title='提示'
          content='是否确定取消预约'
          cancelText='取消'
          confirmText='确认'
          onClose={() => closeModel()}
          onCancel={() => closeModel()}
          onConfirm={() => cancelAppointment()}
        />
      </View>
    </View>
  )
}

export default MyAppointment
